<div>
	<div id="${dialogId}_dialog" style='width: 980px;' data-dojo-type='ism.widgets.Dialog' data-dojo-attach-point='dialog'
		data-dojo-props='title: "${dialogTitle}", 
			instruction: "${dialogInstruction}",
			autofocus: false,
            onEnter: function() {
				if(!dijit.byId("${dialogId}_saveButton").get("disabled")) {
					dojo.publish("${dialogId}_saveButton", ""); 
				} 
			},  
            closeButtonLabel: "${nls.messaging.dialog.cancelButton}",
            buttons: [ new dijit.form.Button({ 
                label: "${nls.messaging.dialog.saveButton}",
                id: "${dialogId}_saveButton",
                onClick: function() { dojo.publish("${dialogId}_saveButton", ""); }
            }) ]'>

		<form id="${dialogId}_DialogForm" data-dojo-type="dijit.form.Form">
			<div style='float: left; display: inline-block; width: 400px; ' id='${dialogId}_leftGroup'> <!-- left section -->
				<div style='padding: 1px 1px 5px 1px; display: block; margin-right: 20px;'>
					<div id="${dialogId}_name" data-dojo-type='ism.widgets.TextBox' data-dojo-attach-point='field_Name'
						data-dojo-props=' 
						inputWidth: "15em",
						label: "${nameLabel}:", 
						tooltipContent: "${nameTooltip}", 
						required: true,
						labelAlignment: "horizontal", 
						labelWidth: "150"'></div>
				</div>
                <div style='padding: 1px 1px 5px 1px; display: block; margin-right: 20px;'>
                    <div class='idxLabel' id='${dialogId}_endpoint_label_enabled' style='width: 147px; display: inline-block'>
                        <span style='padding: 0 7px'></span>
                        ${nls.messaging.endpoints.form.enabled}:</div>
                    <div id='${dialogId}_enabled' data-dojo-type='idx.form.CheckBox' data-dojo-attach-point='field_Enabled' aria-labelledby='${dialogId}_endpoint_label_enabled'
                        data-dojo-props='fieldWidth: "50px", checked: true'></div>
                </div>
				<div style='padding: 1px 1px 5px 1px; display: block; margin-right: 20px;'>
					<div id='${dialogId}_description' data-dojo-type='ism.widgets.TextArea' data-dojo-attach-point='field_Description'
						data-dojo-props='
						inputWidth: "240px",
						label: "${descriptionLabel}:", 
						labelAlignment: "horizontal", 
						alignWithRequired: true,
						labelWidth: "150"'></div>
				</div>
				<div style='padding: 1px 1px 5px 1px; display: block; margin-right: 20px;'>
					<div id='${dialogId}_port' data-dojo-type='ism.widgets.TextBox' data-dojo-attach-point='field_Port'
						data-dojo-props='
						inputWidth: "6em",
						label: "${portLabel}:", 
						required: true,
                        tooltipContent: "${portTooltip}",						
						invalidMessage: "${portInvalid}",
						pattern: "[\\d]+",
						labelAlignment: "horizontal", 
						labelWidth: "150"'></div>
				</div>
				<div style='padding: 1px 1px 5px 1px; display: block; margin-right: 20px;'>
					<select id='${dialogId}_ipAddr' data-dojo-type='idx.form.ComboBox' data-dojo-attach-point='field_Interface'
						data-dojo-props='
                        name: "ipAddr",
						label: "${ipAddrLabel}:", 
						required: true,
						store: new dojo.data.ItemFileWriteStore({
							data: {
								label: "label",
								identifier: "name",
								items: []
							}
						}),
						labelAlignment: "horizontal", 
						labelWidth: "150",
                        pattern: "([\\.\*:a-fA-F0-9]+)|(${all})"'>
					</select>
				</div>
				<div style='padding: 1px 1px 5px 1px; display: block; margin-right: 20px;'>
					<table role="presentation" > 
            			<tr> 
            				<td nowrap style='width:149px; padding: 1px 1px 5px 11px;'>
                    			<span id="${dialogId}_protocolLabel"	class="dashboardLabel">${nls.protocolsLabel}:</span>
								<div style="display: inline-block; vertical-align: bottom; margin: 0 5px;">
									<div id="${dialogId}_protocols_Hover" href="#bogus1" role="tooltip" tabindex="0"
										 class="hoverHelpIcon" onmouseover="idx.widget.HoverHelpTooltip.defaultPosition=['above', 'below']"></div>
									<span id="${dialogId}_protocols_Tooltip"
										  data-dojo-type="idx.widget.HoverHelpTooltip"
										  data-dojo-props='connectId:["${dialogId}_protocols_Hover"], forceFocus: true, showLearnMore:false'>${nls.messaging.endpoints.form.tooltip.protocol}</span>
								</div>
							</td> 
							<td nowrap>
				    			<div style="display: inline-block; vertical-align: bottom;">
				    				<strong>
										<div id="${dialogId}_protocols_Value" href="#bogus1" role="tooltip" tabindex="0"
								 			 onmouseover="idx.widget.HoverHelpTooltip.defaultPosition=['above', 'below']"></div>
					    			</strong>
									<span id="${dialogId}_protocols_Value_Hover" data-dojo-type="idx.widget.HoverHelpTooltip"
										  data-dojo-props='connectId:["${dialogId}_protocols_Value"], forceFocus: true, showLearnMore:false'></span>
								</div>
                    			<a class="actionLink" id="${dialogId}_editProtocol" href="javascript:;" data-dojo-attach-event="onclick:editProtocol">${nls.messaging.endpoints.form.add}</a> 
                			</td>
            			</tr>
            		</table>
				</div>
				<div style='padding: 1px 1px 5px 1px; display: block; margin-right: 20px;'>
					<div id="${dialogId}_maxMessageSize" data-dojo-type='ism.widgets.TextBox' data-dojo-attach-point='field_MaxMessageSize'
						data-dojo-props='
						inputWidth: "8em",
						label: "${maxMessageSizeLabel}:", 
                        required: true,
                        tooltipContent: "${maxMessageSizeTooltip}",                        
                        invalidMessage: "${maxMessageSizeInvalid}",						
						value: "1024",
						unit: "KB",
						pattern: "[\\d]+",
						labelAlignment: "horizontal", 
						labelWidth: "150"'></div>
				</div>
                <div style='padding: 1px 1px 5px 1px; display: block; margin-right: 20px;'>
                    <select id="${dialogId}_securityProfile" data-dojo-type='ism.widgets.Select' data-dojo-attach-point='field_SecurityProfile'
                        data-dojo-props='
                        label: "${securityProfileLabel}:",
                        alignWithRequired: true, 
                        store: new dojo.data.ItemFileWriteStore({
                            data: {
                                label: "label",
                                identifier: "name",
                                items: []
                            }
                        }),
                        labelAlignment: "horizontal", 
                        labelWidth: "150"'>
                    </select>
                </div>				
			</div> <!-- end left section -->
			<div style='float: left; display: inline-block; width: 500px' id='${dialogId}_rightGroup'>
				<!-- right section -->
				<div style='float: left'>
					<div style='padding: 1px 1px 5px 1px; display: block;'>
						<div id="${dialogId}_connectionPolicies" style='padding: 0px 0px 0px 12px;'
							data-dojo-type='ism.controller.content.OrderedReferencedObjectGrid'
							data-dojo-attach-point='field_ConnectionPolicies'
							data-dojo-props='                    
	                        idPrefix: "${dialogId}_CP_",
	                        title: "${connectionPoliciesTitle}", 
	                        tooltipContent: "${connectionPoliciesTooltip}",
	                        nameLabel: "${connectionPolicyLabel}", 
	                        required: true,
	                        messagingPolicies: false'>
						</div>
					</div>
					<div style='padding: 1px 1px 5px 1px; display: block;'>
						<div id="${dialogId}_messagingPolicies" style='padding: 0px 0px 0px 12px;'
							data-dojo-type='ism.controller.content.OrderedReferencedObjectGrid'
							data-dojo-attach-point='field_MessagingPolicies'
							data-dojo-props='                    
	                        idPrefix: "${dialogId}_MP_",
	                        title: "${messagingPoliciesTitle}", 
	                        tooltipContent: "${messagingPoliciesTooltip}",
	                        nameLabel: "${messagingPolicyLabel}", 
	                        required: true,
	                        messagingPolicies: false'>
						</div>
					</div>
				</div>
			</div>
			<div style='clear: both;'/>
		</form>
	</div>
</div>
